<template>
  <div>
    <Form :model="searchFrom" :label-width="80">
      <Card style="margin-bottom: 10px;">
        <Input :placeholder="$t('baseDataManager.typeName')" v-model="searchFrom.f_typeNameLike" style="width:200px"></Input>
        &nbsp;<Button type="primary" @click="getData(1)" icon="ios-search">{{$t('button.search')}}</Button>
      </Card>
    </Form>
    <div style="margin-bottom: 10px;">
      <Button type="primary" @click="add">{{$t('button.add')}}</Button>
      &nbsp;<Button type="error" @click="delAll">{{$t('button.delSelect')}}</Button>
    </div>
    <Table border :data="tableData" :columns="tableColumns" stripe ref="selection" @on-selection-change="handleSelectRow()" />
    <div style="margin:10px 0px;text-align: center;">
      <Page :total="dataCount" :current="searchFrom.page" @on-change="changePage"></Page>
    </div>
    <Modal v-model="formModal" :title="modalTitle" @on-ok="save" @on-cancel="saveCancel" :loading="loading"
      :mask-closable="false">
      <Form ref="saveFrom" :model="entity" :label-width="80" :rules="rules">
        <FormItem prop="typeName" :label="$t('baseDataManager.typeName')">
          <Input v-model="entity.typeName" :placeholder="$t('baseDataManager.typeName')"></Input>
        </FormItem>
        <FormItem prop="remark" :label="$t('baseDataManager.remark')">
          <Input v-model="entity.remark" :placeholder="$t('baseDataManager.remark')"></Input>
        </FormItem>
        <FormItem prop="value" :label="typeValueText" v-if="typeValueText">
          <Input v-model="entity.typeValue" :placeholder="typeValueText"></Input>
        </FormItem>
        <FormItem prop="value" :label="valueText">
          <Input v-model="entity.value" :placeholder="valueText"></Input>
        </FormItem>
        <FormItem prop="preData" label="备用字段2">
          <Input v-model="entity.preData" placeholder="备用字段2"></Input>
        </FormItem>
        <FormItem prop="orderValue" :label="$t('baseDataManager.orderValue')">
          <InputNumber :min="0" v-model="entity.orderValue" :placeholder="$t('baseDataManager.orderValue')"></InputNumber>
        </FormItem>

        <!-- <FormItem prop="stDate" label="时间范围">
          <DatePicker type="daterange" split-panels placeholder="Select date" @on-change="entity.stDate=$event" style="width: 200px"></DatePicker>
        </FormItem> -->

        <FormItem prop="stDate" label="开始时间">
          <DatePicker type="date" :value="new Date(entity.stDate) | formatDate('yyyy-MM-dd')" @on-change="entity.stDate=$event"
            placeholder="开始时间" style="width: 200px"></DatePicker>
        </FormItem>
        
        <FormItem prop="enDate" label="结束时间">
          <DatePicker type="date" :value="new Date(entity.enDate) | formatDate('yyyy-MM-dd')" @on-change="entity.enDate=$event"
            placeholder="结束时间" style="width: 200px"></DatePicker>
        </FormItem>

      </Form>
    </Modal>
  </div>
</template>

<script>
  import {
    list,
    save,
    del,
    delAll
  } from "@/api/manager/baseData";
  import {
    formatDate
  } from "@/libs/tools";
  export default {
    name: "baseDataPane",
    props: {
      typeValue: {
        type: String
      },
      localeName: {
        type: String
      }
    },
    data() {
      return {
        dataCount: 0,
        tableData: [],
        formModal: false,
        modalTitle: "",
        entity: {
          orderValue: 0,
          type: this.typeValue,
          localeName: this.localeName
        },
        pks: [],
        searchFrom: {
          page: 1,
          type: this.typeValue,
          localeName: this.localeName
        },
        loading: true,
        valueText: '备用字段',
        typeValueText: '',
      };
    },
    mounted: function() {
      if (this.typeValue == 80) {
        this.valueText = '赠送矿源值'
      }
      if (this.typeValue == 90) {
        this.typeValueText = '购买算力下限'
        this.valueText = '购买算力上限'
      }
      this.getData();
    },
    computed: {
      rules() {
        return {
          typeName: [{
            required: true,
            message: this.$t("baseDataManager.typeName") +
              this.$t("validateTip.notNull")
          }],
          remark: [{
            required: true,
            message: this.$t("baseDataManager.remark") + this.$t("validateTip.notNull")
          }],
          orderValue: [{
            required: true,
            message: this.$t("baseDataManager.orderValue") +
              this.$t("validateTip.notNull")
          }]
        };
      },
      tableColumns() {
        let that = this;
        let list = [{
            type: "selection",
            width: 60,
            align: "center"
          },
          {
            title: this.$t("baseDataManager.id"),
            align: "center",
            key: "id"
          },
          {
            title: this.$t("baseDataManager.typeName"),
            align: "center",
            key: "typeName"
          },
          {
            title: this.$t("baseDataManager.remark"),
            align: "center",
            key: "remark"
          },
          {
            title: this.$t("baseDataManager.addDate"),
            width: 120,
            align: "center",
            key: "addDate",
            render: (h, params) => {
              return h(
                "div",
                formatDate(new Date(params.row.addDate), "yyyy-MM-dd")
              );
            }
          },
          {
            title: this.$t("baseDataManager.orderValue"),
            width: 120,
            align: "center",
            key: "orderValue"
          },
          {
            title: this.$t("button.operation"),
            key: "action",
            fixed: "right",
            align: "center",
            width: 130,
            render: (h, params) => {
              let edit, del;
              edit = h(
                "Button", {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      that.modalTitle = this.$t("button.edit");
                      that.entity = Object.assign({},
                        this.tableData[params.index]
                      );
                      that.formModal = !this.formModal;
                    }
                  }
                },
                this.$t("button.edit")
              );
              del = h(
                "Button", {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: this.$t("messageTip.tip"),
                        content: "<p>" + this.$t("messageTip.confirm") + "</p>",
                        onOk: () => {
                          this.delete(params.index);
                        }
                      });
                    }
                  }
                },
                this.$t("button.del")
              );
              return h("div", [edit, del]);
            }
          }
        ]
        if (this.typeValue == 80) {
          let st = {
            title: "活动开始时间",
            width: 120,
            align: "center",
            key: "addDate",
            render: (h, params) => {
              return h(
                "div",
                formatDate(new Date(params.row.stDate), "yyyy-MM-dd hh:mm:ss")
              );
            }
          }
          list.splice(4,0,st)

          let en = {
            title: "活动结束时间",
            width: 120,
            align: "center",
            key: "addDate",
            render: (h, params) => {
              return h(
                "div",
                formatDate(new Date(params.row.enDate), "yyyy-MM-dd hh:mm:ss")
              );
            }
          }
          list.splice(5,0,en)
        }
        return list;
      }
    },
    methods: {
      getData(page) {
        if (page) {
          this.searchFrom.page = page;
        }
        list(this.searchFrom)
          .then(response => {
            const data = response.data;
            this.dataCount = data.data.dataCount;
            this.tableData = data.data.entityList;
          })
          .catch(error => {});
      },
      add() {
        this.modalTitle = this.$t("button.add");
        this.formModal = !this.formModal;
      },
      delete(index) {
        del(this.tableData[index].id)
          .then(response => {
            this.$Message.success(this.$t("messageTip.delSuccess"));
            this.searchFrom.page = 1;
            this.getData();
          })
          .catch(error => {
            this.$Message.error(this.$t("messageTip.frontError"));
          });
      },
      delAll() {
        if (this.pks.length == 0) {
          this.$Message.error(this.$t("messageTip.selectOne"));
          return;
        }
        this.$Modal.confirm({
          title: this.$t("messageTip.tip"),
          content: "<p>" + this.$t("messageTip.confirm") + "</p>",
          onOk: () => {
            delAll(this.pks)
              .then(response => {
                this.$Message.success(this.$t("messageTip.delSuccess"));
                this.searchFrom.page = 1;
                this.getData();
              })
              .catch(error => {
                this.$Message.error(this.$t("messageTip.frontError"));
              });
          }
        });
      },
      save() {
        let entity = this.entity;
        if (entity.id) {
          entity["updateUserId"] = this.$store.state.user.userId;
        } else {
          entity["addUserId"] = this.$store.state.user.userId;
        }
        if (entity.stDate) {
          entity.stDate = formatDate(new Date(entity.stDate), 'yyyy-MM-dd hh:mm:ss').replace('08:00:00', '00:00:00')
          console.info(entity.stDate)
          entity.stDate = new Date(entity.stDate).getTime()
        }
        if (entity.enDate) {
          entity.enDate = formatDate(new Date(entity.enDate), 'yyyy-MM-dd hh:mm:ss').replace('08:00:00', '23:59:59')
          console.info(entity.enDate)
          entity.enDate = new Date(entity.enDate).getTime()
        }
        console.info(entity);
        setTimeout(() => {
          this.loading = false;
          this.$nextTick(() => {
            this.loading = true;
            this.$refs.saveFrom.validate(valid => {
              if (valid) {
                save(entity)
                  .then(response => {
                    this.entity = this.$options.data().entity;
                    this.entity.type = this.typeValue;
                    this.entity.localeName = this.localeName;
                    this.getData();
                    this.$Message.success(this.$t("messageTip.saveSuccess"));
                    this.formModal = false;
                  })
                  .catch(error => {
                    this.$Message.error(this.$t("messageTip.frontError"));
                  });
              }
            });
          });
        }, 500);
      },
      saveCancel() {
        this.entity = this.$options.data().entity;
        this.entity.type = this.typeValue;
        this.entity.localeName = this.localeName;
      },
      handleSelectRow(selection) {
        this.pks = [];
        let list = this.$refs.selection.getSelection();
        let that = this;
        list.forEach(function(value, index, array) {
          that.pks.push(value.id);
        });
      },
      changePage(page) {
        this.searchFrom.page = page;
        this.getData();
      }
    }
  };
</script>
